<template>
    <view class="container w-full">
        <view @click="back" class="absolute z-1" :style="{ left: 5 + 'px', top:  homeTop + 'px' }">
            <text class="inline-block i-material-symbols-chevron-left-rounded w-30px h-30px text-white"></text>
        </view>
        <image class="w-full" src="https://s3plus.meituan.net/v1/mss_20cf2cb609bf414daf70e3738dd9eeab/meituan-web-meishife-mobile-img/app_download_banner.png"
            mode="widthFix"></image>
        <view class="w-full p2 pb-3 bg-white box-border">
            <view class="w-full flex items-center">
                <text class="max-w-90% line-clamp-1 text-md font-semibold">华莱士·全鸡汉堡(天河车陂店)</text>
            </view>
            <view class="flex items-center">
                <text class="i-material-symbols-star-outline-rounded w-20px h-20px bg-yellow-400 inline-block"></text>
                <text
                    class="i-material-symbols-star-outline-rounded w-20px h-20px bg-yellow-400 inline-block -translate-x-1"></text>
                <text
                    class="i-material-symbols-star-outline-rounded w-20px h-20px bg-yellow-400 inline-block -translate-x-2"></text>
                <text
                    class="i-material-symbols-star-outline-rounded w-20px h-20px bg-yellow-400 inline-block -translate-x-3"></text>
                <text
                    class="i-material-symbols-star-outline-rounded w-20px h-20px bg-yellow-400 inline-block -translate-x-4"></text>
                <text class="text-sm -translate-x-3 text-red-500">5</text>
                <text class="text-sm text-gray-400">人均：￥19</text>
            </view>
            <view class="w-full flex items-center justify-between box-border">
                <view class="w-75% width-75 flex items-start">
                    <text
                        class="i-material-symbols-location-on-outline-rounded w-15px h-15px bg-yellow-400 inline-block"></text>
                    <text class="w-90 width-90 text-xs text-gray-500">天河区高地大街18号101铺（重庆酸菜鱼对面）</text>
                </view>
                <view
                    class="w-24% width-24 flex items-center mt-2px justify-center border border-0 border-l-1px border-gray-200">
                    <text class="i-material-symbols-phone-enabled-sharp w-25px h-25px bg-gray-400"></text>
                </view>
            </view>
        </view>
        <view class="w-full p2 pt-10px bg-white mt-10px box-border">
            <view class="w-full block box-border pb-5px border border-0 border-b-1px border-gray-200 flex items-center">
                <text class="inline-block w-20px h-15px i-material-symbols-workspace-premium-rounded bg-yellow-400"></text>
                <text class="text-sm font-bold">团购</text>
            </view>
            <view class="w-full mt-5px pt-10px">
                <view class="w-full flex items-start mb-2 border border-0 border-b-1px border-gray-100 pb-10px">
                    <view class="w-1/4 width-25 h-60px relative overflow-hidden rounded-md">
                        <image :lazy-load="true" class="w-full h-full"
                            src="https://p1.meituan.net/deal/e9996c39a0d58509d677b60a9eab131a53412.jpg@180w_164h_1e_1c"
                            mode="aspectFill"></image>
                    </view>
                    <view class="w-3/4 width-75 h-60px flex flex-wrap pl-2 pr-2 box-border content-between">
                        <view class="w-full">
                            <text class="text-sm font-bold line-clamp-2">辣味鸡肉卷2次卡</text>
                        </view>
                        <view class="flex justify-between items-center w-full">
                            <view>
                                <text class="font-bold text-md text-red-500 mr-1">39</text>
                                <text class="text-xs text-gray-500">/元份门市价：78元</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="w-full flex items-start mb-2 border border-0 border-b-1px border-gray-100 pb-10px">
                    <view class="w-1/4 width-25 h-60px relative overflow-hidden rounded-md">
                        <image :lazy-load="true" class="w-full h-full"
                            src="https://p0.meituan.net/deal/11b28143b98c5b063edc13fa103c885e29455.jpg@180w_164h_1e_1c"
                            mode="aspectFill"></image>
                    </view>
                    <view class="w-3/4 width-75 h-60px flex flex-wrap pl-2 pr-2 box-border content-between">
                        <view class="w-full">
                            <text class="text-sm font-bold line-clamp-2">双人手扒鸡套餐</text>
                        </view>
                        <view class="flex justify-between items-center w-full">
                            <view>
                                <text class="font-bold text-md text-red-500 mr-1">32</text>
                                <text class="text-xs text-gray-500">/元份门市价：64元</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="w-full flex items-start mb-2 border border-0 border-b-1px border-gray-100 pb-10px">
                    <view class="w-1/4 width-25 h-60px relative overflow-hidden rounded-md">
                        <image :lazy-load="true" class="w-full h-full"
                            src="https://p0.meituan.net/deal/11b28143b98c5b063edc13fa103c885e29455.jpg@180w_164h_1e_1c"
                            mode="aspectFill"></image>
                    </view>
                    <view class="w-3/4 width-75 h-60px flex flex-wrap pl-2 pr-2 box-border content-between">
                        <view class="w-full">
                            <text class="text-sm font-bold line-clamp-2">1个辣味鸡肉卷+1个牛气冲天堡+1份鸡米花+1份紫薯豌豆派+1份薯条+2杯中可</text>
                        </view>
                        <view class="flex justify-between items-center w-full">
                            <view>
                                <text class="font-bold text-md text-red-500 mr-1">32</text>
                                <text class="text-xs text-gray-500">/元份门市价：64元</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="w-full pt-5px pb-5px flex items-center justify-center relative">
                <text class="text-red-500 text-xs">查看其它29条团购</text>
                <text class="inline-block i-material-symbols-chevron-right w-25px h-25px bg-gray-200 absolute right-0"></text>
            </view>
        </view>
        <view class="w-full p2 pt-10px bg-white mt-10px box-border">
            <text
                class="block box-border pb-5px text-sm font-bold border border-0 border-b-1px border-gray-200">商家概述</text>
            <view class="w-full mt-5px">
                <view class="w-full">
                    <text class="text-xs inline-block text-block w-60px">WIFI</text>
                    <text class="text-xs inline-block text-gray-500">支持WIFI</text>
                </view>
                <view class="w-full">
                    <text class="text-xs inline-block text-block w-60px">营业时间</text>
                    <text class="text-xs inline-block text-gray-500">周一至周日 09:00-05:00</text>
                </view>
            </view>
        </view>
        <view class="w-full p2 pt-10px bg-white mt-10px box-border">
            <text
                class="block box-border pb-5px text-sm font-bold border border-0 border-b-1px border-gray-200">推荐菜</text>
            <view class="w-full mt-5px">
                <text class="text-gray-400 text-xs mr-10px">辣味鸡肉卷</text>
                <text class="text-gray-400 text-xs mr-10px">香辣鸡腿堡</text>
                <text class="text-gray-400 text-xs mr-10px">蜜汁手扒鸡</text>
                <text class="text-gray-400 text-xs mr-10px">鸡米花</text>
                <text class="text-gray-400 text-xs mr-10px">香辣鸡翅</text>
                <text class="text-gray-400 text-xs mr-10px">香酥鸡腿</text>
                <text class="text-gray-400 text-xs mr-10px">御膳香酥鸡</text>
                <text class="text-gray-400 text-xs mr-10px">脆皮全鸡</text>
                <text class="text-gray-400 text-xs mr-10px">薯条</text>
                <text class="text-gray-400 text-xs mr-10px">台式香酥鸡排</text>
                <text class="text-gray-400 text-xs mr-10px">黑椒鸡块</text>
            </view>
        </view>
        <view class="w-full p2 pt-10px bg-white mt-10px box-border">
            <view
                class="w-full box-border pb-5px text-base font-bold border border-0 border-b-1px border-gray-200 flex items-center justify-between">
                <view class="flex items-center align-bottom">
                    <text
                        class="i-material-symbols-star-outline-rounded w-15px h-15px bg-yellow-400 inline-block"></text>
                    <text
                        class="i-material-symbols-star-outline-rounded w-15px h-15px bg-yellow-400 inline-block -translate-x-1"></text>
                    <text
                        class="i-material-symbols-star-outline-rounded w-15px h-15px bg-yellow-400 inline-block -translate-x-2"></text>
                    <text
                        class="i-material-symbols-star-outline-rounded w-15px h-15px bg-yellow-400 inline-block -translate-x-3"></text>
                    <text
                        class="i-material-symbols-star-outline-rounded w-15px h-15px bg-yellow-400 inline-block -translate-x-4"></text>
                </view>
                <text class="text-sm text-block text-xs">7768条评价</text>
            </view>
            <view class="w-full mt-10px box-border">
                <text
                    class="text-yellow-500 text-xs p-5px pl-10px pr-10px inline-block border border-1px border-yellow-500 rounded m-3px">性价比高44</text>
                <text
                    class="text-yellow-500 text-xs p-5px pl-10px pr-10px inline-block border border-1px border-yellow-500 rounded m-3px">味道赞34</text>
                <text
                    class="text-yellow-500 text-xs p-5px pl-10px pr-10px inline-block border border-1px border-yellow-500 rounded m-3px">价格实惠67</text>
                <text
                    class="text-yellow-500 text-xs p-5px pl-10px pr-10px inline-block border border-1px border-yellow-500 rounded m-3px">服务热情31</text>
                <text
                    class="text-yellow-500 text-xs p-5px pl-10px pr-10px inline-block border border-1px border-yellow-500 rounded m-3px">环境很好90</text>
                <text
                    class="text-yellow-500 text-xs p-5px pl-10px pr-10px inline-block border border-1px border-yellow-500 rounded m-3px">干净整洁66</text>
                <text
                    class="text-yellow-500 text-xs p-5px pl-10px pr-10px inline-block border border-1px border-yellow-500 rounded m-3px">菜品不错19</text>
                <text
                    class="text-yellow-500 text-xs p-5px pl-10px pr-10px inline-block border border-1px border-yellow-500 rounded m-3px">肉类好20</text>
                <text
                    class="text-yellow-500 text-xs p-5px pl-10px pr-10px inline-block border border-1px border-yellow-500 rounded m-3px">上菜快24</text>
                <text
                    class="text-yellow-500 text-xs p-5px pl-10px pr-10px inline-block border border-1px border-yellow-500 rounded m-3px">约会圣地78</text>
            </view>
            <view class="w-full flex items-center mt-5px mb-5px justify-center">
                <image class="w-35px h-35px" src="https://img.zcool.cn/community/01d79e602dd14f11013f792865237b.gif"
                    mode="aspectFill"></image>
                <image class="w-35px h-35px" src="https://img.zcool.cn/community/01ffb5602dd14e11013f7928826bf0.gif"
                    mode="aspectFill"></image>
                <image class="w-35px h-35px" src="https://img.zcool.cn/community/019f76602dd14f11013f792853d710.gif"
                    mode="aspectFill"></image>
                <image class="w-35px h-35px" src="https://img.zcool.cn/community/01a630602dd14e11013e3991d30592.gif"
                    mode="aspectFill"></image>
                <image class="w-35px h-35px" src="https://img.zcool.cn/community/016aa0602dd14f11013e399156b3a6.gif"
                    mode="aspectFill"></image>
            </view>
            <view class="w-full">
                <text class="w-full h-1px block box-border mt-5px mb-5px border border-0 border-b-1px border-gray-100"></text>
                <view class="w-full relative mt-10px">
                    <view class="w-full flex items-center">
                        <image class="w-50px h-50px absolute right-20px top-0px opacity-50" src="https://s3plus.meituan.net/v1/mss_20cf2cb609bf414daf70e3738dd9eeab/meituan-web-meishife-mobile-img/serious-evaluation.png" mode="aspectFill"></image>
                        <view class="w-35px h-35px rounded-full overflow-hidden bg-gray-100">
                            <image class="w-full h-full"
                                src="https://s3plus.meituan.net/v1/mss_79a48a0ea5284286a2b609be3d94267e/ugc-config/ugc/review/mt_user.png"
                                mode="aspectFill"></image>
                        </view>
                        <view class="w-auto ml-5px">
                            <text class="block text-xs text-gray-400">qbz571985168</text>
                            <view class="flex items-center align-bottom">
                                <text
                                    class="i-material-symbols-star-outline-rounded w-15px h-15px bg-yellow-400 inline-block"></text>
                                <text
                                    class="i-material-symbols-star-outline-rounded w-15px h-15px bg-yellow-400 inline-block -translate-x-1"></text>
                                <text
                                    class="i-material-symbols-star-outline-rounded w-15px h-15px bg-yellow-400 inline-block -translate-x-2"></text>
                                <text
                                    class="i-material-symbols-star-outline-rounded w-15px h-15px bg-yellow-400 inline-block -translate-x-3"></text>
                                <text
                                    class="i-material-symbols-star-outline-rounded w-15px h-15px bg-yellow-400 inline-block -translate-x-4"></text>
                                <text class="text-xs text-gray-300 -translate-x-3">2022-07-28</text>
                            </view>
                        </view>
                    </view>
                    <view class="w-full line-clamp-4 text-sm mt-5px">
                        一直都很喜欢吃华莱士家的鳕鱼堡还有鸡腿堡，烤翅和麦辣鸡翅，新鲜出炉的果然味道佳！餐厅内干净整洁，服务热情有礼貌，服务小姐姐和一个出品的小哥哥配合默契，效率很高.
                    </view>
                    <view class="w-full">
                        <image class="w-1/6 h-50px scale-95" src="https://p0.meituan.net/shaitu/0bf22602e0ee5533f36b1b104931cba8296413.jpg@110w_110h_1e_1c" mode="aspectFill"></image>
                        <image class="w-1/6 h-50px scale-95" src="https://p0.meituan.net/shaitu/7c901ebacb22b417dbda682fc231831f85320.jpg@110w_110h_1e_1c" mode="aspectFill"></image>
                        <image class="w-1/6 h-50px scale-95" src="https://p0.meituan.net/shaitu/07f55a7979f491722e5e9da1d7095ba474137.jpg@110w_110h_1e_1c" mode="aspectFill"></image>
                    </view>
                </view>
                <text class="w-full h-1px block box-border mt-5px mb-5px border border-0 border-b-1px border-gray-100"></text>
                <view class="w-full mt-10px">
                    <view class="w-full flex items-center">
                        <view class="w-35px h-35px rounded-full overflow-hidden bg-gray-100">
                            <image class="w-full h-full"
                                src="https://img.meituan.net/avatar/b844d33fac9b580f196f33248ecd743d406508.jpg@74w_74h_1e_1c"
                                mode="aspectFill"></image>
                        </view>
                        <view class="w-auto ml-5px">
                            <text class="block text-xs text-gray-400">YP902</text>
                            <view class="flex items-center align-bottom">
                                <text
                                    class="i-material-symbols-star-outline-rounded w-15px h-15px bg-yellow-400 inline-block"></text>
                                <text
                                    class="i-material-symbols-star-outline-rounded w-15px h-15px bg-yellow-400 inline-block -translate-x-1"></text>
                                <text
                                    class="i-material-symbols-star-outline-rounded w-15px h-15px bg-yellow-400 inline-block -translate-x-2"></text>
                                <text
                                    class="i-material-symbols-star-outline-rounded w-15px h-15px bg-yellow-400 inline-block -translate-x-3"></text>
                                <text
                                    class="i-material-symbols-star-outline-rounded w-15px h-15px bg-yellow-400 inline-block -translate-x-4"></text>
                                <text class="text-xs text-gray-300 -translate-x-3">2022-09-29</text>
                            </view>
                        </view>
                    </view>
                    <view class="w-full line-clamp-4 text-sm mt-5px">
                        「#套餐：【下午茶】奶茶随心选兑换券」奶茶味道还算可以，珍珠软软绵绵的，比较入口。兑换券十分的实惠，可以多次购买。这家店装修后十分的宽敞。座位也很多。里面有小孩
                    </view>
                    <view class="w-full">
                        <image class="w-1/6 h-50px scale-95" src="https://p0.meituan.net/shaitu/78d57948479f0d3bd51f6b5c81b101f32413138.jpg@110w_110h_1e_1c" mode="aspectFill"></image>
                        <image class="w-1/6 h-50px scale-95" src="https://p1.meituan.net/shaitu/97b386c6ea7f86f7de016cf8bd92b6472241353.jpg@110w_110h_1e_1c" mode="aspectFill"></image>
                        <image class="w-1/6 h-50px scale-95" src="https://p0.meituan.net/shaitu/c30dac5150927a1623191cc9604cd4692089866.jpg@110w_110h_1e_1c" mode="aspectFill"></image>
                    </view>
                </view>
            </view>
            <view class="w-full pt-5px pb-5px box-border mt-15px mb-5px border border-0 border-b-1px border-t-1px border-gray-200 flex items-center justify-between">
                <text class="text-red-500 text-xs">查看全部7768条评价</text>
                <text class="inline-block i-material-symbols-chevron-right w-25px h-25px bg-gray-200"></text>
            </view>
        </view>
        <image class="w-full h-full"
            src="https://img.zcool.cn/community/01194061e0da4e11013e8cd072b269.png?x-oss-process=image/auto-orient,1"
            mode="widthFix"></image>
    </view>
</template>

<script setup lang="ts">import { Ref } from 'vue';

let num: number = 0
let homeTop: Ref = ref<number>(num)
onMounted((): void => {
    uni.getSystemInfo({
        complete(res): void {
            homeTop.value = res.statusBarHeight ? res.statusBarHeight : 20
        }
    })
})
const back = () => {
    uni.navigateBack()
}
</script>

<style scoped>
.container {
    background-color: #f5f5f5 !important;
    overflow-x: hidden;
}
</style>